<template>
    <div>
        <t-map height="110vw" :markersList="markersList"></t-map>
        <div class="table-div">
            <table   cellspacing="1">
                <tr>
                    <th>序号</th>
                    <th>站点名称</th>
                    <th>播放</th>
                </tr>
                <tr  v-for="(item, index) in resList">
                    <td>{{ index + 1 }}</td>
                    <td @click="toLink(item)">{{ item.name }}</td>
                    <td @click="toLink(item)"><svg   aria-hidden="true" class="icon">
                            <use xlink:href="#icon-bofang"></use>
                        </svg></td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script setup>
import TMap from '@/views/components/TMap/TMap.vue'
import list from '../data/list'
import { computed } from 'vue';
import { useRouter } from "vue-router";

const resList = computed(() => {
    return list;
});


const router = useRouter();
const markersList = computed(()=>{
    let mList = list.map((item)=>{
        return {
            lngLat:item.coordinate
        }
    });
    return mList;
})

const toLink=  (row)=>{
    router.push({path:'/video',query:{id:row.id}});
}
</script>

<style></style>